<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引入 bootstrap 样式表 -->
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    body {
      padding-top: 50px;
    }
  </style>
</head>

<body>
  <!-- 栅格系统 -->
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <h1>图书管理</h1>
      <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">添加</button>
    </div>
    <table class="table table-bordered table-striped table-dark table-hover text-center">
      <thead>
        <!-- 表头行 -->
        <tr>
          <th scope="col">Id</th>
          <th scope="col">书名</th>
          <th scope="col">作者</th>
          <th scope="col">出版社</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 表格中的每一行 -->
        <!-- <tr> -->
        <!-- <th scope="row">xxx</th>
          <td>xxx</td>
          <td>xxx</td>
          <td>xxx</td>
          <td>
            <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
            <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
          </td> -->
        <!-- </tr> -->
      </tbody>
    </table>
  </div>
  <!-- add Modal -->
  <div class="modal fade" id="addModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="addForm" class="p-3">
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="addBtn">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- edit Modal -->
  <div class="modal fade" id="editModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">编辑图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="editForm" class="p-3">
            <input type="hidden" name="id" />
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="editBtn">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 引入 lib 目录下的 bootstrap 和 axios -->
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/bootstrap.min.js"></script>

  <script>

    const tbody = document.querySelector('tbody')

    //  配置全局跟路径
    axios.defaults.baseURL = 'http://www.itcbc.com:3006'

    // 获取数据
    async function fn () {

      const { data } = await axios({

        url: '/api/getbooks',

        params: {

          appkey: 'liushun'

        }

      })

      // console.log(data)

      tbody.innerHTML = data.data.map(item => {

        return `
          <tr> 
              <th scope="row">${item.id}</th>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td>
                  <button data-id = ${item.id} type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                  <button  data-id = ${item.id} data-bookname = ${item.bookname} data-author = ${item.author} data-publisher = ${item.publisher} type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                </td> 
          </tr>
        
        `
      }).join('')

    }

    fn()

    // 点击添加显示模态框

    // let 变量 = new bootstrap.Modal(模态框盒子)
    // 变量.show() // 让模态框显示
    // 变量.hide() // 让模态框隐藏

    let addModal = new bootstrap.Modal(document.querySelector('#addModal'))


    document.querySelector('.btn-success').addEventListener('click', function () {
      // console.log(1)

      addModal.show() // 让模态框显示

    })


    let ts = document.querySelectorAll('#addModal .form-label')


    // console.log(ts[0].innerHTML)

    // 确认按钮
    document.querySelector('#addBtn').addEventListener('click', async function () {

      // 点击确认按钮 要拿到输入框输入的值
      const addForm = document.querySelectorAll('#addForm [name]')

      // 提示消息
      for (let i = 0; i < addForm.length; i++) {

        // 每一个标签
        // console.log(addForm[i])

        for (let j = 0; j < ts.length; j++) {

          // console.log(ts[j].innerHTML)

          if (addForm[i].value.trim() === '' && i === j) {

            return alert(`${ts[j].innerHTML}不能为空`)

          }
        }

      }

      // 发送 Ajax 请求
      const { data } = await axios({

        method: 'POST',

        url: '/api/addbook',

        data: {

          bookname: addForm[0].value,

          author: addForm[1].value,

          publisher: addForm[2].value,

          appkey: 'liushun'

        }

      })

      // console.log(data)

      fn()


      addModal.hide() // 让模态框隐藏

    })



    tbody.addEventListener('click', async function (e) {

      const { dataset, tagName } = e.target

      // 点击删除
      if (e.target.innerHTML === '删除' && dataset.id) {

        // console.log(dataset.id)

        // 发送Ajax请求

        const { data } = await axios({

          method: 'DELETE',

          url: '/api/delbook',

          params: {

            id: dataset.id,

            appkey: 'liushun'
          }

        })

        // console.log(data)

        fn()

        // 清空表单

      }

      // 点击编辑
      // const editModal = document.querySelector('#editModal')

      const editForm = document.querySelectorAll('#editForm [name]')

      let editModal = new bootstrap.Modal(document.querySelector('#editModal'))


      if (e.target.innerHTML === '编辑') {

        // console.log(1)

        editModal.show() // 显示弹框

        // 做数据回显

        const { dataset } = e.target

        // console.log(dataset) 是个对象

        for (const k in dataset) {

          document.querySelector(`#editModal [name=${k}]`).value = dataset[k]

        }



      }

    })

    // 点击编辑确认按钮
    document.querySelector('#editBtn').addEventListener('click', async function () {

      //  发送 Ajax 请求

      const bookname = document.querySelector('#editModal [name=bookname]').value
      const author = document.querySelector('#editModal [name=author]').value
      const publisher = document.querySelector('#editModal [name=publisher]').value
      const id = document.querySelector('#editModal [name=id]').value

      const { data } = await axios({

        method: 'PUT',

        url: '/api/updatebook',

        data: {
          id,
          bookname,
          author,
          publisher,
          appkey: 'liushun'

        }

      })

      console.log(data)

      fn()


      editModal.hide() // 关闭弹框


    })


  </script>

</body>

</html>